<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ajax Post 请求</title>
  </head>
  <style>
    .result {
      width: 200px;
      height: 100px;
      border: 1px solid #90b;
    }
  </style>
  <body>
    <div class="result"></div>

    <script>
      // 获取元素
      const result = document.querySelector(".result");
      // 绑定事件
      result.addEventListener("mouseover", function () {
        // 1.创建对象
        const xhr = new XMLHttpRequest();
        // 2.初始化设置请求方法和url
        xhr.open("POST", "http://127.0.0.1:8080/server");
        // 设置请求头
        xhr.setRequestHeader(
          "Content-Type",
          "application/x-www-form-urlencoded"
        );
        // 设置自定义请求头 需要服务器端进行设置来防止报错
        xhr.setRequestHeader("name", "mannoname");
        // 3.发送
        xhr.send("a=100&b=200&c=300");
        // 4.事件绑定，处理服务器返回的结果
        xhr.onreadystatechange = function () {
          // 判断服务器返回所有结果
          if (xhr.readyState === 4) {
            // 判断响应状态码 200 404 403 401 500
            if (xhr.status >= 200 && xhr.status < 300) {
              // 处理结果 行 头 空行 体
              //   设置result的文本
              result.innerHTML = xhr.response;
            }
          }
        };
      });
    </script>
  </body>
</html>
